<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        function setWidth(e) { if (/Andriod/i.test(navigator.userAgent)) { var f, d = window.innerWidth; (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded", function () { var a = document.getElementsByTagName("body")[0]; a.style.webkitTransformOrigin = "left top"; a.style.webkitTransform = "scale(" + f + ")" }, !1) } } setWidth(750);
    </script>
    <title>首页 - 乐购</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/1.css">
    <!-- 插件 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        /* html, body {
          position: relative;
          height: 100%;
        } */
        /* body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
        } */
        .swiper-container {
          width: 100%;
          height: 100%;
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
    
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
        .img-responsiive{display: block;width: 100%;}
        .swiper-pagination-fraction{
            width: auto;
			left: auto;
			right: 15px;
			padding: 3px 10px;
			font-size: .36rem;
			color: #fff;
			background: rgba(0,0,0,.3);
			border-radius: 10px;
        }
      </style>
</head>

<body>
    <!-- 这些html5的标签   主要作用就是标识    不是用于布局     简单讲   就是保住对应的内容即可 -->
    <div class="container">
        <!-- 头部 -->
        <header>
            <div class="header">
                <img src="images/logo.png" alt="" class="logo">
                <div class="search">
                    <i class="icon fl">&#xe6cf;</i>
                    <input type="text" placeholder="输入商家">
                </div>
                <i class="icon saoma">&#xe604;</i>
                <i class="icon ring">&#xe6b0;</i>
            </div>
        </header>
        <!-- 广告位 -->
        <section>
            <div class="ad">
                <!-- <img src="images/banner1.jpg" alt=""> -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/banner1.jpg" alt="" class="img-responsiive"></div>
                        <div class="swiper-slide"><img src="images/banner2.jpg" alt="" class="img-responsiive"></div>
                        <div class="swiper-slide"><img src="images/banner3.jpg" alt="" class="img-responsiive"></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <!-- 箭头 -->
                    <!-- <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div> -->
                </div>
            </div>
        </section>
        <!-- 广告下面的子菜单 -->
        <section>
            <div class="menu">
                <ul>
                    <li>
                        <a href="">
                            <i class="a1 c1">&#xe649;</i>
                            <p>抽奖</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="a1 c2">&#xe6d8;</i>
                            <p>兑换</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="a1 c3">&#xe600;</i>
                            <p>促销</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="a1 c4">&#xe66e;</i>
                            <p>闪送超市</p>
                        </a>
                    </li>
                </ul>
                <div class="gg">
                    <span>hot</span>
                </div>
            </div>
            <div class="clear"></div>
        </section>
        <!-- 商品 goods 列表 -->
        <section class="dd">
            <div class="goods">
                <img src="images/goods1.jpg" alt=""> <!-- 图片右浮动 -->
                <div class="bb">
                    <h3>Fresh 奶</h3>
                    <!-- pirce 价格 -->
                    <p class="m">光明畅优乳杆菌<span class="pirce">6</span>元/<span class="pirce2">2</span>瓶</p>
                    <p>更多优惠 低至5折</p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="goods">
                <img src="images/goods2.jpg" alt=""> <!-- 图片右浮动 -->
                <div class="bb">
                    <h3 class="yanse">Fresh 奶</h3>
                    <!-- pirce 价格 -->
                    <p class="m">光明畅优乳杆菌<span class="pirce">6</span>元/<span class="pirce2">2</span>瓶</p>
                    <p>更多优惠 低至5折</p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="goods">
                <img src="images/goods1.jpg" alt=""> <!-- 图片右浮动 -->
                <div class="bb">
                    <h3>Fresh 奶</h3>
                    <!-- pirce 价格 -->
                    <p class="m">光明畅优乳杆菌<span class="pirce">6</span>元/<span class="pirce2">2</span>瓶</p>
                    <p>更多优惠 低至5折</p>
                </div>
                <div class="clear"></div>
            </div>
        </section>
        <article></article>
        <!-- 版权 -->
        <footer></footer>
        <!-- 导航 -->
        <nav>
            <div class="nav">
                <ul>
                    <!-- 每个li设置宽度25%，内容水平居中 -->
                    <li>
                        <a href="">
                            <i class="icon">&#xe61e;</i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">&#xe66e;</i>
                            <p>闪送超市</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">&#xe64a;</i>
                            <p>我的</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <i class="icon">&#xe60c;</i>
                            <p>￥0起送</p>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper('.swiper-container', {
        //   direction:'vartical',  //  垂直切换选项
        loop:true,  //循环拖动
        // autoplay:true,//等同于以下设置
        autoplay: {
         delay: 3000,
       stopOnLastSlide: false,
       disableOnInteraction: true,
       },
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });

    </script>
</body>

</html>